<template>
<div class="nav-top" id="top">
  <div class="app-container clearfix top">
    <ul class="top-nav">
      <li class="commpany">
        <span>行业</span>
        <a class="select-down1"><img src="../assets/ico_arrow_down.png"></a>
        <ul class="hide-li nav-li clearfix">
          <li v-for="(people, index) in tradeList" v-text="people.tradeName" :key="index" 
          @click="chooseSex(index, people.id)"></li>
        </ul>
      </li>
      <li v-if="$store.getters.token" @click="$router.push('/my/personInfo')">
        <img v-lazy="$store.getters.avatar" class="header-img">
        <li @click="$router.push('/my/personInfo')" v-text="$store.getters.mobile" class="name"></li>
      </li>
      <li v-if="!$store.getters.token">
        <li class="name" @click="doLogin" v-if="!$store.getters.token">亲，请登录</li>
      </li>
      <li class="back-out" @click='doBack()' v-if="$store.getters.token">退出</li>
      <li class="back-out" @click='doRegist()' v-if="!$store.getters.token">注册</li>
      <li class="father-li">
        <span @click="$router.push('/my/message')">消息</span>
        <div class="icon" @click="$router.push('/my/message')"><img src="../assets/ico_index_news.png"></div>
        <ul class="hide-li hide-ul" v-if="messageList && messageList.length > 0">
          <li class="clearfix" v-for="(messageInfo, index) in messageList" :key="index">
            <message :message="messageInfo" :theme="2"></message>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="top-right">
      <li @click="goToMy(1)">我的订单</li>
      <li @click="goToMy(2)">购物车<em class="c-main"> {{cartCount}} </em>件</li>
      <li @click="goToMy(3)">收藏夹</li>
      <li><a href="javascript: void(0)" @click="goToSellerCenter" target="_blank">卖家中心</a></li>
      <li><router-link to="/my/extra">商家入驻</router-link></li>
      <li class="more-over">
      <span>更多</span>
      <a class="select-down select-mar"><img src="../assets/ico_arrow_down.png"></a>
        <ul class="hide-li clearfix about-me">
          <li><router-link to="/helpCenter/关于我们">关于我们</router-link></li>
          <li><router-link to="/helpCenter/品牌招商">品牌招商</router-link></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
  // 消息组件
  import message from '../pages/my/components/Message'
  import { apiOrderAll, apiTrade } from 'js/api'
  import { mapGetters, mapActions, mapMutations } from 'vuex'
  import app from '../main'
  import { session, cookie } from 'js/util'

  export default {
    data() {
      return {
      }
    },
    created() {
      if (this.token) {
        this.fetchCartCount(this.token)
        apiOrderAll(this.token, 1, '', '', 3).then(data => {
          this.updateMsgList(data.orderFormList)
        })
        apiTrade().then(data => {
          this.updateTradeList(data.TradeList || [])
          session.set('peopleList', data.TradeList)
        })
      }
    },
    computed: {
      ...mapGetters(['token', 'messageList', 'cartCount', 'tradeList'])
    },
    methods: {
      ...mapActions(['fetchCartCount']),
      ...mapMutations(['updateMsgList', 'updateTradeList']),
      doBack() {
        JIM.loginOut()
        this.$store.commit('clearUserInfo')
        this.$router.push('/')
      },
      doLogin() {
        this.$router.push('/login')
      },
      doRegist() {
        this.$router.push('/register')
      },
      chooseSex(index, id) {
        this.currentIndex = index
        this.$store.commit('updateUserInfoIndustry', id)
        this.$router.push('/')
      },
      goToMy(num) {
        if (this.token) {
          if (num == 1) {
            this.$router.push('/my/order')
          } else if (num == 2) {
            this.$router.push('/cart')
          } else {
            this.$router.push('/my/collectionShop')
          }
        } else {
          app.$toast('亲，请先登录', () => {
            this.$router.push('/login')
          })
        }
      },

      /**
       * 跳转到卖家中心
       */
      goToSellerCenter() {
        // 从session中取出数据
        let userLoginInfo = JSON.stringify(session.get('userInfo'))

        // 如果登录信息存在，则登录信息保存在cookie中
        if (userLoginInfo) {
          cookie.set('userInfo', userLoginInfo)
        }

        // 跳转页面
        window.location.href = 'http://218.94.44.226:8801/#/'
      }
    },
    components: {
      message
    }
  }
</script>

<style lang="scss" scoped>
  @import '../scss/_var.scss';
    .top {
      padding: 0 10px;
    }
    .nav-top {
      width: 100%;
      background-color: $color-white;
      padding: 0 10px;
    }
    .top-nav {
      display: inline-block;
      float: left;
      height: 40px;
      font-size: 14px;
      color: #666666;
      margin-left: 0px;
      line-height: 5px;
    }
    .top-nav > li {
      float: left;
      margin-top: 17px;
      text-align: center;
      cursor: pointer;
    }
    .select-down1 {
      position: absolute;
      top: -5px;
      right: 16px;
      height: 17px;
      width: 24px;
      padding: 5px;
    }
    .select-down {
      position: absolute;
      top: -5px;
      right: -14px;
      height: 17px;
      width: 24px;
      padding: 5px;
    }
    .select-mar {
      margin-top: 5px;
    }
    .top-nav > li:first-child {
      margin-left: 0;
    }
    .header-img {
      width: 25px;
      height: 25px;
      border-radius: 16px;
      margin-top: -10px;
      margin-left: 14px;
    }
    .name {
      margin-left: 7px;
      margin-right: 20px;
    }
    .top-right > li {
      float: left;
      margin-top: 13px;
      margin-left: 18px;
      text-align: center;
      cursor: pointer;
    }
    .top-right {
      font-size: 14px;
      display: inline-block;
      float: right;
      height: 40px;
      font-size: 14px;
      color: #666666;
      margin-right: 10px;
    }
  .icon {
      position: absolute;
      top: -4px;
      right: 10px
    }
    .nav_top {
      width: 100%;
      background-color: $color-white
    }
    .top_nav {
      display: inline-block;
      float: left;
      height: 40px;
      font-size: 14px;
      color: #666666;
      margin-left: 0px;
    }
    .top_nav > li {
      float: left;
      margin-top: 17px;
      margin-left: 18px;
      text-align: center;
    }
    .top_nav > li:first-child {
      margin-left: 0;
    }
    .clear {
      clear: both;
    }
    .top_right > li {
      float: left;
      margin-top: 17px;
      margin-left: 18px;
      text-align: center;
    }
    .top_right {
      font-size: 14px;
      display: inline-block;
      float: right;
      height: 40px;
      font-size: 14px;
      color: #666666;
      margin-right: 10px;
    }
    .back_out {
      color: #ef0282;
      margin-right: 27px;
      cursor: pointer;
    }
    .about-me {
      position: absolute;
      top: 25px;
      li {
        width: 66px;
        height: 30px;
        line-height: 30px;
        background-color: #fff;
        border: 1px solid #ddd;
        &:first-child {
          border-bottom: 1px dashed #ddd;
        }
        &:nth-child(2) {
          border-top: 0px;
        }
        a {
          font-size: 12px;
        }
        &:hover {
          a {
            color: #f00384;
          }
        }
      }
    }
    .father-li {
      position: relative;
      padding-right: 40px;
      height: 30px;
    }
    .father-li:hover .hide-ul {
        display: block;
        border: 1px solid #ccc;
    }
    .hide-ul {
      width: 220px;
      border: 1px solid transparent;
      margin-top: 18px;
      li {
        border-bottom: 1px dashed #ddd;
        &:last-child {
          border-bottom: 0px;
        }
      }
    }
    .hide-li {
      display: none;
      position: absolute;
      background-color: $color-white;
      z-index: 9;
    }
    .hide-li li {
      margin: 0;
      cursor: pointer;
    }
    .picture-select {
      width: 90px;
      height: 90px;
      margin: 5px; 
      background-color: #ccc;
    }
    .border {
      border-bottom: 1px solid #ccc;
    }
    .width {
      width: 100%;
    }
    .nav-li {
      margin-top: 18px;
        li {
          border: 1px solid #ccc;
          border-bottom: 1px dashed #ccc;
          width: 66px;
          height: 30px;
          line-height: 30px;
          &:nth-child(2) {
            border-top: none;
          }
          &:nth-child(3) {
            border-top: none;
            border-bottom: 1px solid #ccc;
          }
          &:hover {
            color: #f00384;
          }
        }
    }
    .commpany:hover .nav-li {
      display: block;
    }
    .more-over:hover .hide-li {
      display: block;
    }
    .fontColor {
      color: red;
    }
    .more-over {
      position: relative;
      padding-right: 10px;
      height: 30px;
    }
    .commpany {
      position: relative;
      padding-right: 40px;
      height: 30px;
    }
    .inlineText {
      text-align: left;
      div {
        margin-top: 12px;
      }
    }
    .back-out {
      color: $color-main;
      margin-right: 46px;
    }
</style>